<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
      <el-form-item label="日期：" prop="type">
        <el-date-picker v-model="dateTtime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptions"
          :editable="false" placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="年级" prop="year">
        <el-select v-model="queryParams.year"  clearable  placeholder="请选择年级" @change="getqueryFormclassList">
          <el-option
            v-for="dict in dict.type.year_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="班级" prop="classId">
        <el-select v-model="queryParams.classId" :disabled='isClassDisabled' clearable   placeholder="请选择班级">
          <el-option
            v-for="item in classList"
            :key="item.id"
            :label="item.label"
            :value="item.id"
            size="small">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生姓名：" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入学生姓名" clearable size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="info" icon="el-icon-download" size="mini" @click="handleExport" >导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="drinkWaterList">
      <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
      <el-table-column label="年级" align="center" prop="year" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.year_type" :value="scope.row.year"/>
        </template>
      </el-table-column>
      <el-table-column label="班级" align="center" prop="className" />
      <el-table-column label="学生姓名" align="center" prop="name" />
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" prop="age" />
      <el-table-column label="饮水地点" align="center" >教室</el-table-column>
      <el-table-column label="饮水总量/ml" align="center" prop="drinkTotal" />
      <el-table-column label="饮水次数" align="center" prop="drinkFrequency" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetails(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <el-dialog title="幼儿饮水详情" :visible.sync="open" width="950px" append-to-body :close-on-click-modal="false">
      <el-table v-loading="loading" :data="watertDetail" max-height="600">
        <el-table-column type="index" align="center" label="序号" :index="customeIndex1"></el-table-column>
        <el-table-column  align="center" label="饮水设备名称"  prop="deviceName"></el-table-column>
        <el-table-column align="center" label="饮水时间" prop="drinkTime"></el-table-column>
        <el-table-column align="center" label="饮水量/ml" prop="drinkMl"></el-table-column>
      </el-table>
      <pagination v-show="ystotal > 0" :total="ystotal" :page.sync="ysParams.pageNum" :limit.sync="ysParams.pageSize"
        @pagination="getWatertDetail" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dycsOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selectClazz } from "@/api/base/clazz";
import { studentDrinkWater, drinkWaterDetail,drinkWaterExport } from "@/api/drinkWater/drink";
import moment from "moment";
export default {
  name: "qyyeysmx",
  dicts: ['year_type','sys_user_sex'],
  data() {
    return {
      dateTtime: new Date(),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      schoolList: [],  // 园所列表
      drinkWaterList: [],
      // 班级表格数据
      classOptions: [],
      typeOptions: [],
      schoolNatureOptions: [],
      schoolTypeOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      total: 0,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        schoolCode:this.$store.getters.schoolCode,
        classId: '',
      },
      watertDetail: [],
      ystotal: 0,
      ysParams: {
        id: '',
        pageNum: 1,
        pageSize: 10,
      },
      classList:[],
      isClassDisabled:true//班级disabled
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 导出
    handleExport() {
      this.handleQuery();
      const obj = {
          drinkDate: moment(this.dateTtime).format("YYYY-MM-DD"),
          classId: this.queryParams.classId,
          name: this.queryParams.name,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          schoolCode: this.$store.getters.schoolCode,
      }
      drinkWaterExport(obj).then(response => {
        this.download(response.msg);
      })
    },
    //幼儿饮水总量和次数
    async getList() {
      this.loading = true;
      try {
        const obj = {
          drinkDate: moment(this.dateTtime).format("YYYY-MM-DD"),
          classId: this.queryParams.classId,
          name: this.queryParams.name,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          schoolCode: this.$store.getters.schoolCode,
        }
        const data = await studentDrinkWater(obj)
        this.drinkWaterList = data.rows;
        this.total = data.total;
        this.loading = false;
      } catch (error) {
        console.log(error);
      }
    },
    //幼儿饮水详情
    async getWatertDetail() {
      try {
        const obj = {
          drinkDate: moment(this.dateTtime).format("YYYY-MM-DD"),
          stuId: this.ysParams.id,
          pageNum: this.ysParams.pageNum,
          pageSize: this.ysParams.pageSize,
        }
        const data = await drinkWaterDetail(obj);
        this.watertDetail = data.rows;
        this.ystotal = data.total;
      } catch (error) {
        console.log(error);
      }
    },
    /**班级*/
    async getqueryFormclassList(){
      this.isClassDisabled = true
      this.queryParams.classId = null
      try {
        let params={}
        if(this.queryParams.year) params.year = this.queryParams.year;
        const {rows}=await selectClazz(params);
        if(rows.length && this.queryParams.year){
          this.isClassDisabled =  false
        }
        this.classList=rows.map(item=>{
          return {
            id:item.id,
            label:item.title,
          }
        })

      }catch (e) {
        console.log(e)
      }
    },
    // 序号
    customeIndex(index) {
      return index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
    },
    // 序号
    customeIndex1(index) {
      return index + 1 + (this.ysParams.pageNum - 1) * this.ysParams.pageSize
    },
    async getClazzList() {
      try {
        const obj = {
          // schoolCode: this.queryParams.schoolCode,
        }
        const data = await clazzList(obj)
        this.classOptions = data.rows;
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    getClear() {
      this.queryParams.classId = ''
    },
    selectSchool() {
      this.getClazzList()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: '',
        classId: '',
      },
      this.dateTtime = new Date();
      this.resetForm("queryForm");
      this.handleQuery();
      this.isClassDisabled = true
    },
    handleDetails(row) {
      this.ysParams.id = row.stuId
      this.open = true;
      this.getWatertDetail();
    },
    dycsOk() {
      this.watertDetail = []
      this.open = false;
      this.ysParams = {
        id: '',
        pageNum: 1,
        pageSize: 10,
      }
    },
    dcysCancel() {
      this.watertDetail = []
      this.open = false;
      this.ysParams = {
        id: '',
        pageNum: 1,
        pageSize: 10,
      }
    },
  }
};
</script>
